import { defineStore } from 'pinia'
//定义todos模块
export default defineStore('todos', {
  state: () => ({
    //反序列化一下,循环none他可能报错
    list: JSON.parse(localStorage.getItem('todos')) || [],
    // list: [
    //   {
    //     id: 1,
    //     name: '吃饭',
    //     done: false,
    //   },
    //   {
    //     id: 2,
    //     name: '睡觉',
    //     done: true,
    //   },
    //   {
    //     id: 3,
    //     name: '打豆豆',
    //     done: false,
    //   },
    // ],
    //准备数据,负责渲染的数据
    filters: ['All', 'Active', 'Completed'],
    //active: 'All', //负责处理高亮状态的
    active: localStorage.getItem('active') || 'All', //从本地取
  }),
  actions: {
    //定义修改状态的方法
    changeDone(id) {
      const item = this.list.find((item) => item.id === id)
      item.done = !item.done
    },
    deleteItem(id) {
      this.list = this.list.filter((item) => item.id != id) //保留不等于的就是删除等于的
    },
    addItem(item) {
      this.list.unshift(item)
    },
    changeAllDone(done) {
      this.list.forEach((item) => (item.done = done))
    },
    //清除功能
    clearComplted() {
      //保留未完成就是清空已完成的
      this.list = this.list.filter((item) => !item.done)
    },
    //点击高亮
    changeActive(active) {
      this.active = active
    },
  },
  //在 getters 中提供计算属性，在 actions 中提供方法
  getters: {
    isCheckAll() {
      //每一个down为ture才为true
      return this.list.every((item) => item.done)
    },
    leftCount() {
      //统计剩余数量,未完成的false
      return this.list.filter((item) => !item.done).length
    },
    //是否显示底部栏,根据list的长度弄一个计算属性
    isShowFooter() {
      //不等于0就显示
      return this.list.length != 0
    },
    //是否显示清除按钮,筛选已完成的大于0才有必要显示
    isShowClear() {
      //return this.list.filter((item) => item.done).length > 0
      return this.list.some((item) => item.done) //但凡有一个true整体就返回true
    },
    //根据active产生一个筛选结果,不改变源数据
    renderList(state) {
      //this.list
      if (this.active === 'Active') {
        return state.list.filter((item) => !item.done)
      }
      if (this.active === 'Completed') {
        return state.list.filter((item) => item.done)
      }
      return state.list
    },
  },
})
